<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Google Earth Plug-in Driving Simulator</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <!-- API Key for code.google.com -->
  <script type="text/javascript" src="http://www.google.com/jsapi?hl=en&key=ABQIAAAANX1UEkx5va-B8I-VAyZHdxRANBwFBV5lvn06w6VGRDTtcJKhxhSlzG5tM-rohRx2QpF9STfBXsDMGQ"></script>
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <link rel="stylesheet" type="text/css" href="js/extjs22/resources/css/ext-all.css" />
  <script type="text/javascript" src="js/math3d.js"></script>
  <script type="text/javascript" src="js/blamDoInit.js"></script>
  <script type="text/javascript" src="js/blam.js"></script>
  <script type="text/javascript" src="js/policecar.js"></script>

  <script type="text/javascript" src="js/extjs22/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="js/extjs22/ext-all.js"></script>
  //<script language="javascript" src="js/blamExtJs.js"></script>

<script type="text/javascript">
// <![CDATA[

// defines the Google Earth Plugin and google map js objects
var ge, map;

// defines boolean variables
var geInitialised = false;
var gmInitialised = false;

// defines which mode the GE plugin is in
var currentMode = "FLYMODE";

var carMarkerOnMap;

google.load("jquery", "1");
google.load("maps", "2.x");
google.load("earth", "1");

function onresize() {
  var clientHeight = document.documentElement.clientHeight;
  $('#route-details, #earth-container, #map-container').each(function() {
     $(this).css({
          height: (clientHeight - $(this).position().top - 100).toString() + 'px' });      
   });
}

function init() {
 
  initGE("earth-container");
  initGM();
  
  $(window).resize(onresize);
  onresize();
}

	function reposPolicecarToMelbourne() {
		if (ge == null) alert("ge is null");
		else if (currentMode == "FLYMODE"){
			policecar = new Policecar();
  			currentMode = "DRIVEMODE";
		}
	}

	function synchGE() {
		//alert("map dragend");
		var conTangent2 = parseFloat(2.95074418222186 * 0.000001);
		var gmCentre, gmBounds, gmSouthWest, gmNorthEast, height, width, geLookAt;
		
		gmCentre = map.getCenter();
		gmBounds = map.getBounds();

		gmSouthWest = gmBounds.getSouthWest();
		gmNorthEast = gmBounds.getNorthEast();
		height = gmNorthEast.lat() - gmSouthWest.lng();
		width = gmNorthEast.lng() - gmSouthWest.lng();
		
		// set ge view from gm
  		var geRange = width / (2 * conTangent2);

		geLookAt= ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
		geLookAt.setLatitude(gmCentre.lat());
		geLookAt.setLongitude(gmCentre.lng());
		geLookAt.setRange(geRange);
		geLookAt.setTilt(0);
		geLookAt.setHeading(0);

 		ge.getView().setAbstractView(geLookAt);
	}

	function delPoliceCar() {
	  if (currentMode == "DRIVEMODE") {
		google.earth.removeEventListener(ge, "frameend", updateViewScene);
		ge.getFeatures().removeChild(policecar.placemark);
		ge.getFeatures().removeChild(policecar.shadow);
		policecar = null;
		map.removeOverlay(carMarkerOnMap);
   		currentMode = "FLYMODE";
	  }
		synchGE();
	}
  
// ]]>
  
  </script>
</head>

<body onload="init();" onunload="GUnload();" onKeyDown="return keyDown(event);" onKeyUp="return keyUp(event);">
<p><font face="Arial" size="5">Urban Emergency Management Driving Simulator</font></p>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="99%" height="100%">
  <tr>
    <td width="50%">
    	 <div id="earth-container" style="border: 0px solid #000; width: 100%"; height: 500px;">
      </div>
    </td>
    <td width="50%">
      <div id="map-container" style="border: 0px solid #000; height: 500px; width: 100%"></div>
    </td>
  </tr>
</table>

<div id="status">
      <table id="tblCarStatus" style="width: 1024px; height: 20px;">
        <tr>
		<td style="width: 380px;"><span>speed:</span><span id="lblSpeed">speed</span></td>
		<td style="width: 380px;"><span>  lon:</span><span id="lblLon">lon</span></td>
		<td style="width: 380px;"><span>  lat:</span><span id="lblLat">lat</span></td>
	  </tr>
	</table>
</div>
<input type="button" value="Show the Buildings" name="showBuildings" onclick="loadAllBuildings();">
<input type="button" value="Drive Mode" name="addCar" onclick="reposPolicecarToMelbourne();">
<input type="button" value="Fly Mode" name="delCar" onclick="delPoliceCar();">
<div id="test"></div>

</body>
</html>